<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" th:src="@{/static/js/jquery-3.1.1.min.js}"></script>
  <script type="text/javascript" th:src="@{/static/js/jquery.paginate.js}"></script>
</head>
<body>
<div class="row clearfix">
  <div class="col-md-12 column">
    <table class="table table-hover table-striped">
      <thead>
      <tr>
        <th>图书编号</th>
        <th>图书名字</th>
        <th>图书数量</th>
        <th>操作</th>
      </tr>
      </thead>
      <!--判断是否为空-->
      <tbody th:unless="${#lists.isEmpty(books)}">

      <!--循环-->
      <tr th:each="book : ${books}">
        <td th:text="${book.bookId}"></td>
        <td th:text="${book.name}"></td>
        <td th:text="${book.number}"></td>
        <!--拼接URL，占坑填上即可，避免加号拼接-->
        <td>
          <a th:href="@{/book/detail/{bookId} (bookId=${book.bookId})}">详情</a> |
          <a th:href="@{/book/del/{bookId} (bookId=${book.bookId})}">删除</a>
        </td>
      </tr>
      </tbody>
    </table>
    <div id="page" url="/book/list"></div>
    <div th:replace="page :: page"></div>
  </div>
</div>
</body>
</html>